<template>
  <div>
    <div class="inp" v-show="flag == true">
      <el-form>
        <el-row>
          <el-col :span="6">
            <div class="contain">
              产品名字：<el-input
                clearable
                v-model="input"
                style="width: 198px"
                placeholder="请输入产品名字"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="contain">
              状态：<el-select
                clearable
                v-model="value"
                placeholder="请选择 状态"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button type="primary" @click="search">
              <i class="el-icon-search"></i>
              <span>搜 索</span>
            </el-button>
            <el-button @click="qingkong">
              <i class="el-icon-delete"></i>
              <span>清 空</span>
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content" style="margin-top: 20px">
      <div class="menu">
        <div class="left">
          <el-button type="primary" class="but" @click="add">
            <i class="el-icon-plus"></i>
            <span>新增</span>
          </el-button>
          <el-button
            type="danger"
            class="but"
            :disabled="disabled"
            @click="delMore"
          >
            <span>批量删除</span>
          </el-button>
        </div>
        <div class="right">
          <el-button @click="wu">
            <i class="el-icon-refresh"></i>
          </el-button>
          <el-button @click="down">
            <i class="el-icon-search"></i>
          </el-button>
          <!-- <el-button class="but" @click="wu">
            <i class="el-icon-refresh"></i>
          </el-button>
          <el-button class="but" @click="down">
            <i class="el-icon-search"></i>
          </el-button> -->
        </div>
      </div>
      <div class="tag">
        <el-tag>
          <span style="margin-right: 10px"
            >当前表格已选择
            <span style="font-size: 16px; font-weight: 600">{{ tip }}</span>
            项</span
          >
          <button
            type="button"
            class="el-button el-button--text el-button--small"
            @click="reset"
          >
            <span>清 空</span>
          </button>
        </el-tag>
      </div>
      <div class="form">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          stripe
          :header-cell-style="{
            fontSize: '14px',
            backgroundColor: '#eef1f6',
            color: '#333',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column label="产品名字" width="107" align="center">
            <template slot-scope="scope">
              {{ scope.row.prodName }}
            </template>
          </el-table-column>
          <el-table-column label="商品原价" width="105" align="center">
            <template slot-scope="scope">
              {{ scope.row.oriPrice }}
            </template>
          </el-table-column>
          <el-table-column label="商品现价" width="105" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="商品库存" width="105" align="center">
            <template slot-scope="scope">
              {{ scope.row.totalStocks }}
            </template>
          </el-table-column>
          <el-table-column label="产品图片" width="150" align="center">
            <template slot-scope="scope">
              <span>
                <div
                  class="proImg"
                  style="display: flex; justify-content: center"
                >
                  <img :src="scope.row.pic" alt="" />
                </div>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="150" align="center">
            <template slot-scope="scope">
              <el-tag v-show="scope.row.status == 1">上架</el-tag>
              <el-tag v-show="scope.row.status == 0">未上架</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary">
                <i class="el-icon-edit"></i>
                <span>修改</span>
              </el-button>
              <el-button type="danger" @click="del(scope.$index, scope.row)">
                <i class="el-icon-delete"></i>
                <span>删除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag:true,
      tip: 0,
      options: [
        {
          value: "0",
          label: "未上架",
        },
        {
          value: "1",
          label: "上架",
        },
      ],
      value: "",
      input: "",
      disabled: true,
      tableData: [],
      total: 0,
      params: {
        current: 1,
        size: 10,
      },
      currentPage: 1,
      delId: [],
    };
  },
  created() {
    this.$nextTick(() => {
      this.getList();
    });
  },
  methods: {
    wu(){

    },
    down(){
      if(this.flag == true){
        this.flag = false
      }else{
        this.flag = true
      }
    },
    search() {
      console.log(this.input);
      console.log(this.value);
      this.$set(this.params, "prodName", this.input);
      this.$set(this.params, "status", this.value);
      console.log(this.params);
      this.getList();
    },
    qingkong() {
      this.input = "";
      this.value = "";
    },
    add() {
      this.$router.push("/prodInfo");
    },
    del(index, row) {
      console.log(row.prodId);
      let a = [];
      a.push(row.prodId);
      console.log(a);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("apis/prod/prod", {
              data: a,
            })
            .then((res) => {
              console.log(res);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.size = val;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.current = val;
      this.getList();
    },
    reset(){
      this.handleSelectionChange([])
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
      this.tip = this.multipleSelection.length
      if (this.multipleSelection.length == 0) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
      let a = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        // console.log(this.multipleSelection[i].prodId);
        a.push(this.multipleSelection[i].prodId);
      }
      console.log(a);
      this.delId = a;
    },
    delMore() {
      // console.log(JSON.parse(JSON.stringify(this.delId)));
      let a = JSON.parse(JSON.stringify(this.delId))
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("apis/prod/prod", {
              data: a,
            })
            .then((res) => {
              console.log(res);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getList() {
      this.$http
        .get("apis/prod/prod/page", {
          params: this.params,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.tableData = res.data.records;
            // for(let i=0;i<res.data.records.length;i++){
            //   this.$set(this.tableData[i], "serNum", i + 1)
            // }
            this.total = res.data.total;
            console.log(this.tableData);
          }
        });
    },
  },
};
</script>

<style scoped>
.inp {
  width: 100%;
  /* display: flex; */
}
.contain {
  display: flex;
  justify-content: end;
  align-items: center;
}
.el-col {
  margin-right: 10px;
}
.menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.right .but {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  background-color: #fff;
  margin: 0 8px;
}
.tag {
  margin-bottom: 10px;
}
.proImg img {
  height: 40px;
}
.block {
  margin-top: 20px;
}
</style>